<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/>
    <meta name="renderer" content="webkit"/>
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>
    <title>选择项目</title>
    <meta name="description" content=""/>
    <meta name="keywords" content=""/>
    <link rel="stylesheet" href="css/style.css"/>
    <script src="js/jquery.js"></script>
    <script src="js/lib.js"></script>
    <script src="js/vue.min.js"></script>
    <script src="layer/layer.js"></script>
</head>
<style>
    [v-cloak] {
        display: none;
    }
</style>
<body class="bgclass">
<div  v-cloak  class="main" id="app">
    <div class="main" v-if="status==0">
        <div class="tab-wrap">
            <div class="m-select-item" role="checkbox">
                <div class="line" v-for="(item,index) in list" @click="getChecked(index)">
                    <div class="pic">
                        <img src="images/j-p10.png" alt="">
                    </div>
                    <div class="txt">
                        <h3>{{item.menuName}}</h3>
                        <p>￥{{item.price}}/{{item.shiJian}}分钟</p>
                        <!--<span>570单</span>-->
                    </div>
                    <label :class="{ checked: item.checked }">
                        <input type="checkbox">
                    </label>
                </div>
            </div>
            <div class="g-a1" @click="checkedok(1)">
                选好了，支持多选
            </div>
        </div>
    </div>
    <!-- 选择日期 -->
    <div class="main mainsbg" v-if="status==1">
        <ul class="ul-tab2">
            <li :class="{ on: dayindex==0 }" @click="daychecked(0,today)">
                <div>
                    <p>{{today}}</p>
                    今天
                </div>
            </li>
            <li :class="{ on: dayindex==1 }" @click="daychecked(1,tomorrow)">
                <div>
                    <p>{{tomorrow}}</p>
                    明天
                </div>
            </li>
            <li :class="{ on: dayindex==2 }" @click="daychecked(2,afterday)">
                <div>
                    <p>{{afterday}}</p>
                    后天
                </div>
            </li>
        </ul>
        <div class="m-item-time">
            <div class="time" :class="{on:timeindex==0}" @click="onclicktime(0)">
                <i class="icon iconfont icon-taiyang"></i><span>00:00-17:30</span>
            </div>
            <div class="time" :class="{on:timeindex==1}" @click="onclicktime(1)">
                <i class="icon iconfont icon-yueliang"></i><span>18:00-23:30</span>
            </div>
        </div>
        <div v-if="dayindex==0">
            <div class="m-check" role="checkbox" v-if="timeindex==0">
                <label @click="timechecked(item.id,item.time)"
                       :class="{ checked: item.id==timeindex2,disable:item.id<disableid }"
                       v-for="(item,index) in daytimelist">
                    <input type="checkbox">
                    <span>{{item.time}}</span>
                </label>
            </div>
            <div class="m-check" role="checkbox" v-if="timeindex==1">
                <label @click="timechecked(item.id,item.time)"
                       :class="{ checked: item.id==timeindex2,disable:item.id<disableid }"
                       v-for="(item,index) in nighttimelist">
                    <input type="checkbox">
                    <span>{{item.time}}</span>
                </label>
            </div>
        </div>
        <div v-else>
            <div class="m-check" role="checkbox" v-if="timeindex==0">
                <label @click="timechecked(item.id,item.time)" :class="{ checked: item.id==timeindex2 }"
                       v-for="(item,index) in daytimelist">
                    <input type="checkbox">
                    <span>{{item.time}}</span>
                </label>
            </div>
            <div class="m-check" role="checkbox" v-if="timeindex==1">
                <label @click="timechecked(item.id,item.time)" :class="{ checked: item.id==timeindex2 }"
                       v-for="(item,index) in nighttimelist">
                    <input type="checkbox">
                    <span>{{item.time}}</span>
                </label>
            </div>
        </div>
        <div class="g-a1" @click="checkedok(2)">确认选择</div>
    </div>
    <!--预约信息-->
    <div v-if="status==2" class="main">
        <div class="m-txt">
            <div class="wp">
                门店名称
                <span>{{companyName}}</span>
            </div>
        </div>
        <div class="m-yuyue">
            <div class="wp">
                <div class="con" v-for="item in menus">
                    <a href="javascript:(0)">
                        <div class="pic">
                            <img :src="userinfo.imgUrl" alt="">
                        </div>
                        <div class="txt">
                            <h3>{{userinfo.userName}}-{{techId}}号</h3>
                            <p>{{item.menuName}} <span>￥{{item.price}}/{{item.shiJian}}分钟</span></p>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <div class="m-txt">
            <div class="wp">
                项目总计
                <span class="s2">￥{{contprice}}</span>
            </div>
        </div>
    </div>
    <div v-if="status==2" @click="sub" class="g-a1">立即预约</div>
</div>

<script>
    var ajaxUrl = 'http://intereek.natapp1.cc/pangu/xcx.do';

    function getDateStr(dayCount) {
        if (null == dayCount) {
            dayCount = 0;
        }
        var dd = new Date();
        dd.setDate(dd.getDate() + dayCount);//设置日期
        var y = dd.getFullYear();
        var m = dd.getMonth() + 1;//获取当前月份的日期
        var d = dd.getDate();
        return m + "-" + d;
    }

    var vm = new Vue({
        el: "#app",
        data: {
            techId: 0,
            companyCode: '',
            list: [],
            status: 0,
            length: 0,
            today: '',
            tomorrow: '',
            afterday: '',
            dayindex: 0,
            timeindex: 0,
            timeindex2: -1,
            disableid: 0,
            companyName: '',
            contprice: 0,
            nighttimelist: [{
                time: '18:00', checked: false, id: 37,
            }, {
                time: '18:30', checked: false, id: 38,
            }, {
                time: '19:00', checked: false, id: 39,
            }, {
                time: '19:30', checked: false, id: 40,
            }, {
                time: '20:00', checked: false, id: 41,
            }, {
                time: '20:30', checked: false, id: 42,
            }, {
                time: '21:00', checked: false, id: 43,
            }, {
                time: '21:30', checked: false, id: 44,
            }, {
                time: '22:00', checked: false, id: 45,
            }, {
                time: '22:30', checked: false, id: 46,
            }, {
                time: '23:00', checked: false, id: 47,
            }, {
                time: '23:30', checked: false, id: 48,
            }],
            daytimelist: [{
                time: '00:00', checked: false, id: 1,
            }, {
                time: '00:30', checked: false, id: 2,
            }, {
                time: '01:00', checked: false, id: 3,
            }, {
                time: '01:30', checked: false, id: 4,
            }, {
                time: '02:00', checked: false, id: 5,
            }, {
                time: '02:30', checked: false, id: 6,
            }, {
                time: '03:00', checked: false, id: 7,
            }, {
                time: '03:30', checked: false, id: 8,
            }, {
                time: '04:00', checked: false, id: 9,
            }, {
                time: '04:30', checked: false, id: 10,
            }, {
                time: '05:00', checked: false, id: 11,
            }, {
                time: '05:30', checked: false, id: 12,
            }, {
                time: '06:00', checked: false, id: 13,
            }, {
                time: '06:30', checked: false, id: 14,
            }, {
                time: '07:00', checked: false, id: 15,
            }, {
                time: '07:30', checked: false, id: 16,
            }, {
                time: '08:00', checked: false, id: 17,
            }, {
                time: '08:30', checked: false, id: 18,
            }, {
                time: '09:00', checked: false, id: 19,
            }, {
                time: '09:30', checked: false, id: 20,
            }, {
                time: '10:00', checked: false, id: 21,
            }, {
                time: '10:30', checked: false, id: 22,
            }, {
                time: '11:00', checked: false, id: 23,
            }, {
                time: '11:30', checked: false, id: 24,
            }, {
                time: '12:00', checked: false, id: 25,
            }, {
                time: '12:30', checked: false, id: 26,
            }, {
                time: '13:00', checked: false, id: 27,
            }, {
                time: '13:30', checked: false, id: 28,
            }, {
                time: '14:00', checked: false, id: 29,
            }, {
                time: '14:30', checked: false, id: 30,
            }, {
                time: '15:00', checked: false, id: 31,
            }, {
                time: '15:30', checked: false, id: 32,
            }, {
                time: '16:00', checked: false, id: 33,
            }, {
                time: '16:30', checked: false, id: 34,
            }, {
                time: '17:00', checked: false, id: 35,
            }, {
                time: '17:30', checked: false, id: 36,
            }],
            menus: [],
            datatimes: '',
            day: '',
            info: [],
            userinfo: []
        },
        mounted: function () {
            var that = this;
            that.techId = that.queryString('techId')
            that.companyCode = that.queryString('companyCode')
            console.log(that.techId, that.companyCode)
            that.getdata()
            that.getdate()
            that.getuserinfo()
        },
        methods: {
            getdata() {
                var that = this;
                $.ajax({
                    type: "POST",
                    url: ajaxUrl,
                    dataType: "jsonp",
                    // data: "name=garfield&age=18",
                    data: {
                        operationType: 'queryLocal',
                        companyCode: that.companyCode,
                        techId: that.techId,
                        queryType: 'JiShiYuYueTechMenus'
                    },
                    success: function (data) {
                        var list = data.result
                        var list3 = []
                        for (var i = 0; i < list.length; i++) {
                            var list2 = {
                                menuName: list[i].menuName,
                                price: list[i].price,
                                shiJian: list[i].shiJian,
                                checked: false
                            }
                            list3.push(list2)
                        }
                        that.list = list3
                    }
                });
            },
            getuserinfo() {
                var that = this;
                $.ajax({
                    type: "POST",
                    url: ajaxUrl,
                    dataType: "jsonp",
                    // data: "name=garfield&age=18",
                    data: {
                        operationType: 'jiShiYuYue',
                        companyCode: that.companyCode,
                    },
                    success: function (data) {
                        if (data.success) {
                            that.companyName = data.result.companyName
                            that.info = data.result.result
                            console.log(that.info)
                            that.getuserinfo2()
                        } else {
                            layer.msg(data.errorDesc)
                        }
                    }
                });
            },
            // 获取对应的id的信息
            getuserinfo2() {
                var that = this;
                var infolist = that.info
                for (var i = 0; i < infolist.length; i++) {
                    console.log(i)
                    if (that.techId == infolist[i].userId) {
                        that.userinfo = infolist[i]
                    }
                }
            },
            sub() {
                var that = this;
                $.ajax({
                    type: "POST",
                    url: ajaxUrl,
                    dataType: "jsonp",
                    // data: "name=garfield&age=18",
                    data: {
                        operationType: 'queryLocal',
                        queryType: 'JiShiYuYueAdd',
                        companyCode: that.companyCode,
                        techId: that.techId,
                        menus: JSON.stringify(that.menus),
                        yuJiDaoDa: that.datatimes
                    },
                    success: function (data) {
                        if (data.success) {
                            layer.msg('预约成功');
                        } else {
                            layer.msg(data.errorDesc)
                        }
                    }
                });
            },
            daychecked(e, day) {
                this.dayindex = e
                this.day = day
                if (e == 0 && this.timeindex2 < this.disableid) {
                    this.timeindex2 = -1
                }
            },
            onclicktime(e) {
                this.timeindex = e
            },
            timechecked(e, time) {
                if (this.dayindex == 0 && e < this.disableid) {
                    return
                } else {
                    this.timeindex2 = e
                    this.datatimes = this.day + ' ' + time
                    console.log(this.datatimes)
                }

            },
            getdate() {
                this.today = getDateStr(0)
                this.tomorrow = getDateStr(1)
                this.afterday = getDateStr(2)
                this.hour = new Date().getHours()
                this.min = new Date().getMinutes()
                this.day = this.today
                console.log(this.hour, this.min)
                if (this.min > 30) {
                    this.disableid = this.hour * 2 + 3
                } else {
                    this.disableid = this.hour * 2 + 2
                }
            },
            getChecked(e) {
                var that = this;
                that.list[e].checked = !that.list[e].checked
                that.getcheckedlength()
                that.getmenus()
            },
            getmenus() {
                var that = this;
                var list = this.list
                var list3 = []
                var contprice = 0
                for (var i = 0; i < list.length; i++) {
                    if (list[i].checked) {
                        var list2 = {
                            menuName: list[i].menuName,
                            price: list[i].price,
                            shiJian: list[i].shiJian
                        }
                        contprice += list[i].price
                        list3.push(list2)
                    }
                    that.contprice = contprice

                }
                that.menus = list3
                console.log(that.menus)
            },
            checkedok(e) {
                if (this.length == 0) {
                    layer.msg('还没有选择服务', function () {
                        return false
                    });
                    return false
                } else {

                }
                if (e == 2) {
                    if (this.timeindex2 == -1) {
                        layer.msg('请选择时间', function () {
                            return false
                        });
                        return false
                    }
                }
                this.status = e
            },
            queryString(name) {
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
            },
            getcheckedlength() {
                var length = 0
                var list = this.list
                for (var i = 0; i < list.length; i++) {
                    if (list[i].checked) {
                        length++
                    }
                }
                this.length = length
            },

        },
        filters: {
            filtersImg: function (img) {
                var imgs = ajaxUrl + '/' + img
                console.log(imgs)
                return imgs;
            },
            filtersNav: function (e) {
                var s = parseInt(e) + 1;
                var img = 'image/nav-' + s + '.png'
                return img;
            }
        }
    })
</script>
</body>

</html>
